<template>
    <div class="container">
        <!-- 上方内容区域 -->
        <div class="content-box">
            <span class="corner-text">3D效果图</span>
            <div class="main-content">
                <Sence v-if="modelUrl !== 'none'" :modelUrl="modelUrl"></Sence>
                
            </div>
        </div>

        <!-- 下方图片区域 -->
        <div class="image-container">
            <div class="image-box">
                <span class="corner-text">PCB design package</span>
                <img v-if="imageUrl1" :src="imageUrl1" :alt="getImageAlt(imageUrl1)">
            </div>
            <div class="image-box">
                <span class="corner-text">SCH design symbol</span>
                <img v-if="imageUrl2" :src="imageUrl2" :alt="getImageAlt(imageUrl2)">
            </div>
        </div>
    </div>
</template>

<script setup>
import Sence from '@/components/Sence.vue'

import { defineProps } from 'vue'

const props = defineProps({
    modelUrl: {
        type: String,
        default: 'none'
    },
    imageUrl1: {
        type: String,
        required: true
    },
    imageUrl2: {
        type: String,
        required: true
    }
})

const getImageAlt = (url) => {
    return `从${url}加载的展示图片`
}
</script>

<style scoped>
.container {
    background-color: #000;
    padding: 4px;
    min-height: calc(100vh - 98px);
}

.content-box,
.image-box {
    background-color: #1A1A1A;
    /* border-radius: 12px; */
    /* padding: 20px; */
    margin-bottom: 4px;
    position: relative;
    overflow: hidden;
}
.content-box{
    height: 486px;
}
.corner-text {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1;
    font-size: 12px;
    font-weight: normal;
    line-height: 16px;
    color: #FFFFFF;
}

.main-content {
    color: white;
    /* padding-top: 30px; */
    height: 100%;
}

.image-container {
    display: flex;
    gap: 4px;
}

.image-box {
    flex: 1;
    min-height: 300px;
}

.image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* border-radius: 8px; */
    margin-top: 30px;
}
</style>
